<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Overlay - UIkit tests</title>

        <script src="../_test.js"></script>
    </head>

    <body>

        <div class="uk-container uk-container-center">

            <h1>Overlay</h1>

            <h2>Alignment</h2>

            <div class="uk-grid" data-uk-grid-margin>

                <div class="uk-width-medium-1-3">
                    <figure class="uk-overlay">
                        <img src="http://unsplash.it/600/400" width="600" height="400" alt="">
                        <figcaption class="uk-overlay-panel">
                            <h3>Title</h3>
                            <p>Lorem <a href="#">ipsum dolor</a> sit amet.</p>
                            <p class="uk-margin-small"><button class="uk-button">Button</button> <button class="uk-button uk-button-primary">Button</button></p>
                            <p class="uk-margin-small"><a href="#" class="uk-icon-button uk-icon-github"></a> <a href="#" class="uk-icon-button uk-icon-twitter"></a></p>
                            <a class="uk-icon-search uk-icon-small" href="#"></a>
                            <a class="uk-icon-share uk-icon-small" href="#"></a>
                        </figcaption>
                    </figure>
                    <p class="uk-text-center">Default</p>
                </div>

                <div class="uk-width-medium-1-3">
                    <figure class="uk-overlay">
                        <img src="http://unsplash.it/601/401" width="600" height="400" alt="">
                        <figcaption class="uk-overlay-panel uk-overlay-background uk-flex uk-flex-bottom">
                            <div>
                                <h3>Title</h3>
                                <p>Lorem <a href="#">ipsum dolor</a> sit amet, consetetur sadipscing elitr.</p>
                            </div>
                        </figcaption>
                    </figure>
                    <p class="uk-text-center">Background, Bottom</p>
                </div>

                <div class="uk-width-medium-1-3">
                    <figure class="uk-overlay">
                        <img src="http://unsplash.it/602/402" width="600" height="400" alt="">
                        <figcaption class="uk-overlay-panel uk-overlay-background uk-flex uk-flex-center uk-flex-middle uk-text-center">
                            <div>
                                <h3>Title</h3>
                                <p>Lorem <a href="#">ipsum dolor</a> sit amet.</p>
                                <p class="uk-margin-small"><button class="uk-button">Button</button> <button class="uk-button uk-button-primary">Button</button></p>
                                <p class="uk-margin-small"><a href="#" class="uk-icon-button uk-icon-github"></a> <a href="#" class="uk-icon-button uk-icon-twitter"></a></p>
                                <a class="uk-icon-search uk-icon-small" href="#"></a>
                                <a class="uk-icon-share uk-icon-small" href="#"></a>
                            </div>
                        </figcaption>
                    </figure>
                    <p class="uk-text-center">Background, Center</p>
                </div>

            </div>

            <h2>Hover</h2>

            <div class="uk-grid" data-uk-grid-margin>

                <div class="uk-width-medium-1-3">
                    <figure class="uk-overlay uk-overlay-hover">
                        <img src="http://unsplash.it/600/400" width="600" height="400" alt="">
                        <figcaption class="uk-overlay-panel uk-overlay-fade">
                            <h3>Title</h3>
                            <p>Lorem <a href="#">ipsum dolor</a> sit amet, consetetur sadipscing elitr.</p>
                        </figcaption>
                    </figure>
                    <p class="uk-text-center">Fade</p>
                </div>

                <div class="uk-width-medium-1-3">
                    <figure class="uk-overlay uk-overlay-hover">
                        <img src="http://unsplash.it/601/401" width="600" height="400" alt="">
                        <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-slide-left uk-flex uk-flex-bottom">
                            <div>
                                <h3>Title</h3>
                                <p>Lorem <a href="#">ipsum dolor</a> sit amet, consetetur sadipscing elitr.</p>
                                <a class="uk-position-cover" href="#"></a>
                            </div>
                        </figcaption>
                    </figure>
                    <p class="uk-text-center">Background, Slide, Bottom, Link</p>
                </div>

                <div class="uk-width-medium-1-3">
                    <figure class="uk-overlay uk-overlay-hover">
                        <img src="http://unsplash.it/602/402" width="600" height="400" alt="">
                        <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-scale uk-flex uk-flex-center uk-flex-middle uk-text-center">
                            <div>
                            <h3>Title</h3>
                                <p>Lorem <a href="#">ipsum dolor</a> sit amet.</p>
                                <p class="uk-margin-small"><button class="uk-button">Button</button> <button class="uk-button uk-button-primary">Button</button></p>
                                <p class="uk-margin-small"><a href="#" class="uk-icon-button uk-icon-github"></a> <a href="#" class="uk-icon-button uk-icon-twitter"></a></p>
                                <a class="uk-icon-search uk-icon-small" href="#"></a>
                                <a class="uk-icon-share uk-icon-small" href="#"></a>
                                <a class="uk-position-cover" href="#"></a>
                            </div>
                        </figcaption>
                    </figure>
                    <p class="uk-text-center">Background, Scale, Center, Link</p>
                </div>

            </div>

            <h2>Positions</h2>

            <div class="uk-grid" data-uk-grid-margin>

                <div class="uk-width-medium-1-4">
                    <figure class="uk-overlay uk-overlay-hover">
                        <img src="http://unsplash.it/600/400" width="600" height="400" alt="">
                        <figcaption class="uk-overlay-panel uk-overlay-top uk-overlay-slide-top">
                            <h3>Title</h3>
                            <p>Lorem ipsum dolor sit amet.</p>
                        </figcaption>
                    </figure>
                    <p class="uk-text-center">Top</p>
                </div>

                <div class="uk-width-medium-1-4">
                    <figure class="uk-overlay uk-overlay-hover">
                        <img src="http://unsplash.it/601/401" width="600" height="400" alt="">
                        <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-bottom uk-overlay-slide-bottom">
                            <h3>Title</h3>
                            <p>Lorem ipsum dolor sit amet.</p>
                        </figcaption>
                    </figure>
                    <p class="uk-text-center">Bottom, Background</p>
                </div>

                <div class="uk-width-medium-1-4">
                    <figure class="uk-overlay uk-overlay-hover">
                        <img src="http://unsplash.it/602/402" width="600" height="400" alt="">
                        <div class="uk-overlay-panel uk-overlay-background uk-overlay-left uk-overlay-slide-left uk-width-1-2">
                            <h3>Title</h3>
                            <p>Lorem ipsum dolor sit amet.</p>
                        </div>
                        <a class="uk-position-cover" href="#"></a>
                    </figure>
                    <p class="uk-text-center">Left, Background, Anchor</p>
                </div>

                <div class="uk-width-medium-1-4">
                    <figure class="uk-overlay uk-overlay-hover">
                        <img src="http://unsplash.it/603/403" width="600" height="400" alt="">
                        <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-right uk-overlay-slide-right uk-width-1-2">
                            <h3>Title</h3>
                            <p>Lorem ipsum dolor sit amet.</p>
                            <a class="uk-position-cover" href="#"></a>
                        </figcaption>
                    </figure>
                    <p class="uk-text-center">Right, Background, Anchor only in panel</p>
                </div>

            </div>

            <h2>Icon</h2>

            <div class="uk-grid" data-uk-grid-margin>

                <div class="uk-width-medium-1-4">
                    <figure class="uk-overlay">
                        <img src="http://unsplash.it/600/400" width="600" height="400" alt="">
                        <div class="uk-overlay-icon"></div>
                    </figure>
                    <p class="uk-text-center">Default</p>
                </div>

                <div class="uk-width-medium-1-4">
                    <figure class="uk-overlay uk-overlay-hover">
                        <img src="http://unsplash.it/601/401" width="600" height="400" alt="">
                        <div class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></div>
                        <a class="uk-position-cover" href="#"></a>
                    </figure>
                    <p class="uk-text-center">On hover, Background, Fade, Anchor</p>
                </div>

                <div class="uk-width-medium-1-4">
                    <figure class="uk-overlay uk-overlay-hover">
                        <img src="http://unsplash.it/602/402" width="600" height="400" alt="">
                        <div class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-slide-left"></div>
                        <a class="uk-position-cover" href="#"></a>
                    </figure>
                    <p class="uk-text-center">On hover, Background, Slide, Anchor</p>
                </div>

                <div class="uk-width-medium-1-4">
                    <figure class="uk-overlay uk-overlay-hover">
                        <img src="http://unsplash.it/603/403" width="600" height="400" alt="">
                        <div class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></div>
                        <div class="uk-overlay-panel uk-overlay-background uk-overlay-bottom uk-overlay-slide-bottom">
                            <p>Lorem ipsum dolor sit amet.</p>
                        </div>
                        <a class="uk-position-cover" href="#"></a>
                    </figure>
                    <p class="uk-text-center">2 Overlays, Anchor</p>
                </div>

            </div>

            <h2>Image Animations</h2>

            <div class="uk-grid" data-uk-grid-margin>

                <div class="uk-width-medium-1-4">
                    <figure class="uk-overlay uk-overlay-hover">
                        <img class="uk-overlay-scale" src="http://unsplash.it/600/400" width="600" height="400" alt="">
                        <div class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></div>
                        <a class="uk-position-cover" href="#"></a>
                    </figure>
                    <p class="uk-text-center">Scale</p>
                </div>

                <div class="uk-width-medium-1-4">
                    <figure class="uk-overlay uk-overlay-hover">
                        <img class="uk-overlay-fade" src="http://unsplash.it/601/401" width="600" height="400" alt="">
                        <div class="uk-overlay-panel uk-ignore uk-flex uk-flex-center uk-flex-middle uk-text-center">
                            <div>
                                <h3 class="uk-margin-remove">Title</h3>
                            </div>
                        </div>
                        <a class="uk-position-cover" href="#"></a>
                    </figure>
                    <p class="uk-text-center">Fade</p>
                </div>

                <div class="uk-width-medium-1-4">
                    <figure class="uk-overlay uk-overlay-hover uk-border-circle">
                        <img class="uk-overlay-spin" src="http://unsplash.it/602/402" width="600" height="400" alt="">
                        <div class="uk-overlay-panel uk-overlay-background uk-overlay-bottom uk-overlay-slide-bottom">
                            <h3 class="uk-text-center">Title</h3>
                        </div>
                        <a class="uk-position-cover" href="#"></a>
                    </figure>
                    <p class="uk-text-center">Spin</p>
                </div>

                <div class="uk-width-medium-1-4">
                    <figure class="uk-overlay uk-overlay-hover">
                        <img class="uk-overlay-grayscale" src="http://unsplash.it/603/403" width="600" height="400" alt="">
                        <div class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></div>
                        <div class="uk-overlay-panel uk-overlay-background uk-overlay-bottom uk-overlay-slide-bottom">
                            <p>Lorem ipsum dolor sit amet.</p>
                        </div>
                        <a class="uk-position-cover" href="#"></a>
                    </figure>
                    <p class="uk-text-center">Grayscale</p>
                </div>

            </div>

            <h2>Second Image</h2>

            <div class="uk-grid" data-uk-grid-margin>

                <div class="uk-width-medium-1-4">
                    <figure class="uk-overlay uk-overlay-hover">
                        <img src="http://unsplash.it/600/400" width="600" height="400" alt="">
                        <img class="uk-overlay-panel uk-overlay-image uk-overlay-fade" src="http://unsplash.it/601/401" width="600" height="400" alt="">
                        <a class="uk-position-cover" href="#"></a>
                    </figure>
                    <p class="uk-text-center">Fade</p>
                </div>

                <div class="uk-width-medium-1-4">
                    <figure class="uk-overlay uk-overlay-hover">
                        <img class="uk-overlay-fade" src="http://unsplash.it/601/401" width="600" height="400" alt="">
                        <img class="uk-overlay-panel uk-overlay-image uk-overlay-scale" src="http://unsplash.it/602/402" width="600" height="400" alt="">
                        <div class="uk-overlay-panel uk-ignore uk-flex uk-flex-center uk-flex-middle uk-text-center">
                            <div>
                                <h3 class="uk-margin-remove">Title</h3>
                            </div>
                        </div>
                        <a class="uk-position-cover" href="#"></a>
                    </figure>
                    <p class="uk-text-center">Scale</p>
                </div>

                <div class="uk-width-medium-1-4">
                    <figure class="uk-overlay uk-overlay-hover uk-border-circle">
                        <img class="uk-overlay-spin" src="http://unsplash.it/602/402" width="600" height="400" alt="">
                        <img class="uk-overlay-panel uk-overlay-image uk-overlay-spin" src="http://unsplash.it/603/403" width="600" height="400" alt="">
                        <div class="uk-overlay-panel uk-overlay-background uk-overlay-bottom uk-overlay-slide-bottom">
                            <h3 class="uk-text-center">Title</h3>
                        </div>
                        <a class="uk-position-cover" href="#"></a>
                    </figure>
                    <p class="uk-text-center">Spin</p>
                </div>

                <div class="uk-width-medium-1-4">
                    <figure class="uk-overlay uk-overlay-hover">
                        <img class="uk-overlay-grayscale" src="http://unsplash.it/603/403" width="600" height="400" alt="">
                        <img class="uk-overlay-panel uk-overlay-image uk-overlay-grayscale" src="http://unsplash.it/604/404" width="600" height="400" alt="">
                        <div class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></div>
                        <div class="uk-overlay-panel uk-overlay-background uk-overlay-bottom uk-overlay-slide-bottom">
                            <p>Lorem ipsum dolor sit amet.</p>
                        </div>
                        <a class="uk-position-cover" href="#"></a>
                    </figure>
                    <p class="uk-text-center">Grayscale</p>
                </div>

            </div>

            <h2>DEPRECATED: Area with icon</h2>

            <h3>Image, anchor, text</h3>

            <div class="uk-margin">

                <div class="uk-overlay">
                    <img src="holder.js/200x100/auto" alt="">
                    <div class="uk-overlay-area"></div>
                </div>

                <a class="uk-overlay" href="#">
                    <img src="holder.js/200x100/auto" alt="">
                    <div class="uk-overlay-area"></div>
                </a>

                <div class="uk-overlay uk-width-medium-1-4">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                    <div class="uk-overlay-area"></div>
                </div>

            </div>

            <h3>Thumbnail</h3>

            <div class="uk-grid" data-uk-grid-margin>

                <div class="uk-width-medium-1-3">
                    <div class="uk-thumbnail uk-overlay-toggle">
                        <div class="uk-overlay">
                            <img src="holder.js/400x250/auto" alt="">
                            <div class="uk-overlay-area"></div>
                        </div>
                    </div>
                </div>

                <div class="uk-width-medium-1-3">
                    <a class="uk-thumbnail uk-overlay-toggle" href="#">
                        <div class="uk-overlay">
                            <img src="holder.js/400x250/auto" alt="">
                            <div class="uk-overlay-area"></div>
                        </div>
                        <div class="uk-thumbnail-caption">Caption <code>&lt;a&gt;</code></div>
                    </a>
                </div>

                <div class="uk-width-medium-1-3">
                    <figure class="uk-thumbnail">
                        <a class="uk-overlay" href="#">
                            <img src="holder.js/400x250/auto" alt="">
                            <div class="uk-overlay-area"></div>
                        </a>
                        <figcaption class="uk-thumbnail-caption">Caption <code>&lt;figure&gt;</code></figcaption>
                    </figure>
                </div>

            </div>

            <h2>DEPRECATED: Area with content</h2>

            <h3>Image, anchor, text</h3>

            <div class="uk-margin">

                <div class="uk-overlay">
                    <img src="holder.js/200x100/auto" alt="">
                    <div class="uk-overlay-area">
                        <div class="uk-overlay-area-content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</div>
                    </div>
                </div>

                <a class="uk-overlay" href="#">
                    <img src="holder.js/200x100/auto" alt="">
                    <div class="uk-overlay-area">
                        <div class="uk-overlay-area-content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</div>
                    </div>
                </a>

                <div class="uk-overlay uk-width-medium-1-4">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                    <div class="uk-overlay-area">
                        <div class="uk-overlay-area-content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</div>
                    </div>
                </div>

            </div>

            <h3>Thumbnail</h3>

            <div class="uk-grid" data-uk-grid-margin>

                <div class="uk-width-medium-1-3">
                    <div class="uk-thumbnail uk-overlay-toggle">
                        <div class="uk-overlay">
                            <img src="holder.js/400x250/auto" alt="">
                            <div class="uk-overlay-area">
                                <div class="uk-overlay-area-content">
                                    <p>Lorem <a href="#">ipsum dolor</a> sit amet, consetetur sadipscing elitr.</p>
                                    <button class="uk-button uk-button-primary">Button</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="uk-width-medium-1-3">
                    <div class="uk-thumbnail uk-overlay-toggle">
                        <div class="uk-overlay">
                            <img src="holder.js/400x250/auto" alt="">
                            <div class="uk-overlay-area">
                                <div class="uk-overlay-area-content">
                                    <p>Lorem <a href="#">ipsum dolor</a> sit amet, consetetur sadipscing elitr.</p>
                                    <button class="uk-button uk-button-primary">Button</button>
                                </div>
                            </div>
                        </div>
                        <div class="uk-thumbnail-caption">Caption</div>
                    </div>
                </div>

                <div class="uk-width-medium-1-3">
                    <figure class="uk-thumbnail">
                        <div class="uk-overlay">
                            <img src="holder.js/400x250/auto" alt="">
                            <div class="uk-overlay-area">
                                <div class="uk-overlay-area-content">
                                    <p>Lorem <a href="#">ipsum dolor</a> sit amet, consetetur sadipscing elitr.</p>
                                    <button class="uk-button uk-button-primary">Button</button>
                                </div>
                            </div>
                        </div>
                        <figcaption class="uk-thumbnail-caption">Caption <code>&lt;figure&gt;</code></figcaption>
                    </figure>
                </div>

            </div>

            <h2>DEPRECATED: Caption</h2>

            <h3>Image, anchor, text</h3>

            <div class="uk-margin">

                <div class="uk-overlay">
                    <img src="holder.js/200x100/auto" alt="">
                    <div class="uk-overlay-caption">Some text</div>
                </div>

                <a class="uk-overlay" href="#">
                    <img src="holder.js/200x100/auto" alt="">
                    <div class="uk-overlay-caption">Some text</div>
                </a>

                <div class="uk-overlay uk-width-medium-1-4">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                    <div class="uk-overlay-caption">Some text</div>
                </div>

            </div>

            <h3>Thumbnail</h3>

            <div class="uk-grid" data-uk-grid-margin>

                <div class="uk-width-medium-1-3">
                    <div class="uk-thumbnail uk-overlay-toggle">
                        <div class="uk-overlay">
                            <img src="holder.js/400x250/auto" alt="">
                            <div class="uk-overlay-caption">Some text</div>
                        </div>
                    </div>
                </div>

                <div class="uk-width-medium-1-3">
                    <a class="uk-thumbnail uk-overlay-toggle" href="#">
                        <div class="uk-overlay">
                            <img src="holder.js/400x250/auto" alt="">
                            <div class="uk-overlay-caption">Some text</div>
                        </div>
                        <div class="uk-thumbnail-caption">Caption <code>&lt;a&gt;</code></div>
                    </a>
                </div>

                <div class="uk-width-medium-1-3">
                    <figure class="uk-thumbnail">
                        <a class="uk-overlay" href="#">
                            <img src="holder.js/400x250/auto" alt="">
                            <div class="uk-overlay-caption">Some text</div>
                        </a>
                        <figcaption class="uk-thumbnail-caption">Caption <code>&lt;figure&gt;</code></figcaption>
                    </figure>
                </div>

            </div>

        </div>

    </body>
</html>